<template>
    <el-container direction="vertical" :style="{height: '100%'}">
        <el-header>
            <!-- 头部 -->
            <HeaderVue />
        </el-header>
        <el-main>
            <el-container direction="vertical" :style="{height: '100%'}">
                <el-main>
                    <div class="map">
                        <WordMapVue @toCard="toCard" ref="wordMap"/>
                    </div>
                    <div class="book">
                        <WordBookVue @moveMapByNodeId="moveMapByNodeId" @toCard="toCard" v-show="mode == 'table'" ref="wordBook"/>
                        <WordCardVue @toTable="toTable" v-show="mode == 'card'"  ref="wordCard"/>
                    </div>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
</template>

<script>
import { user,card } from "../store/storeTest";
import HeaderVue from '../components/Header.vue';
import WordBookVue from '../components/WordBook.vue';
import WebSocketUtils  from "@/js/websocket";
import WordMapVue from '../components/WordMap.vue';
import WordCardVue from '../components/WordCard.vue';
import { de } from 'vis';

export default {
    name: "Home",
    components: { HeaderVue, WordBookVue, WordMapVue, WordCardVue},
    data() {
        return {
            user: user,
            mode: "table", // table or card
        };
    },
    created() {
        WebSocketUtils.connect();
        WebSocketUtils.heartbeat();
        WebSocketUtils.accpetCallback = (res) => {
            switch (res.msg) {
                case "/addWord":
                    this.$refs.wordBook.addWord(res.data);
                    break;
                case "/addData":
                    this.$refs.wordMap.addData(res.data);
                    break;
            }
        }
    },
    destroyed() {
        WebSocketUtils.close();
    },
    methods:{
        toTable() {
            this.mode = "table";
        },
        toCard() {
            this.mode = "card";
            this.$refs.wordCard.load();
        },
        moveMapByNodeId(id) {
            this.$refs.wordMap.moveToByNodeId(id);
        }
    }
};
</script>

<style scoped>
.map{
    width: 60%;
    height: 100%;
    float: left;
}
.book{
    width: 40%;
    height: 100%;
    float: left;
}
</style>
